<template>
  <div class="page-info">
    <div class="search">
      <!-- <div class="search-box">
        <a-form :model="searchInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :name="labelMap['liveStreamingFlag'].name" :label="labelMap['liveStreamingFlag'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.liveStreamingFlag" :placeholder="'请选择' + labelMap['liveStreamingFlag'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :name="labelMap['startTime'].name" :label="labelMap['startTime'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.startTime" :placeholder="'请选择' + labelMap['startTime'].label" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :name="labelMap['endTime'].name" :label="labelMap['endTime'].label">
                <a-input style="width: 90%;margin-left: 8px;" v-model:value="searchInfo.endTime" :placeholder="'请选择' + labelMap['endTime'].label" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
            <a-row :gutter="24">
                <a-col style="text-align: right; margin-bottom: 20px;">
                  <a-space>
                    <a-button type="primary" @click="query"> 查找</a-button>
                    <a-button type="primary" @click="cancelQuery">清空</a-button>
                  </a-space>
                </a-col>
            </a-row>
        </a-form>
      </div> -->
    </div>
    <div class="button" style="margin: 10px;">
      <!-- <a-space>
        <a-button type="primary" @click="editLiveStreamingConfig('add')">新增</a-button>
        <a-button type="primary" danger @click="batchDelLiveStreamingConfig">删除</a-button>
      </a-space> -->
    </div>
    <div class="content">
      <a-table :dataSource="dataSource" :columns="columns" :loading="loading" :row-key="(record) => record.id"
        :pagination="pagination" @change="handleTableChange" :scroll="{ y: 470 }" :row-selection="rowSelection">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-button type="primary" size="small"
                @click="editLiveStreamingConfig('update', record.id, true)">开启</a-button>
              <a-button type="primary" size="small" @click="editLiveStreamingConfig('update', record.id, false)"
                danger>关闭</a-button>
            </a-space>
            <span></span>
          </template>
          <template v-else-if="column.key === 'key'">
            <span>直播开启状态</span>
          </template>
          <template v-else-if="column.key === 'liveStreamingFlag'">
            <a-tag :key="record.liveStreamingFlag" :color="record.liveStreamingFlag ? '#87d068' : 'red'">
              {{ record?.liveStreamingFlag ? '是' : '否' }}
            </a-tag>
          </template>
        </template>
      </a-table>
      <LiveStreamingConfigDetail ref="editInfo" :open="visible" :modelInfo="modelInfo" @handleOk="handleOk"
        @handleCancel="handleCancel"></LiveStreamingConfigDetail>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  SearchInfo,
  pagination,
  columns,
  DataItem,
  ModelInfo,
  pageInfo,
} from "./liveStreamingConfigListTs";
import { getLiveStreamingConfigPage, deleteLiveStreamingConfig, addOrEditLiveStreamingConfig } from "@/api/commonInfo/liveStreamingConfig/liveStreamingConfigTs";
import { message } from "ant-design-vue";

const labelCol = ref({ span: 5 });
const wrapperCol = ref({ span: 19 });

let rowIds = [] as any;

const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
    rowIds = selectedRowKeys;
  },
  onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
    console.log(selected, selectedRows, changeRows);
  },
});

const labelMap = ref<any>(
  {
    liveStreamingFlag: { name: 'liveStreamingFlag', label: '直播开启状态: 0=关闭, 1=开启' },
    startTime: { name: 'startTime', label: '直播允许开始时间' },
    endTime: { name: 'endTime', label: '直播允许结束时间' },
  });

let searchInfo = ref<SearchInfo>({});


const cancelQuery = (): void => {
  searchInfo.value = {};
}

const query = (): void => {
  getLiveStreamingConfigListPage(searchInfo.value, pagination.value);
}

const handleTableChange = (pagination): void => {
  getLiveStreamingConfigListPage(searchInfo.value, pagination);
}

const delLiveStreamingConfig = (ids: string): void => {
  deleteLiveStreamingConfig(ids).then((res) => {
    if (res.code == "200") {
      message.success((res && "删除" + res.message) || "删除成功！", 3);
      getLiveStreamingConfigListPage(searchInfo.value, pagination.value);
    } else {
      message.error((res && res.message) || "删除失败！", 3);
    }
  });
}

const batchDelLiveStreamingConfig = (): void => {
  let ids = "";
  if (rowIds && rowIds.length > 0) {
    rowIds.forEach((item: string) => {
      ids += item + ",";
    });
    ids = ids.substring(0, ids.length - 1);
  } else {
    message.warning("请先选择数据！", 3);
    return;
  }
  delLiveStreamingConfig(ids);
}

let loading = ref<boolean>(false);

let dataSource = ref();

const cancel = (e: MouseEvent): void => {
  console.log(e);
}

const getLiveStreamingConfigListPage = (param: SearchInfo, cur: pageInfo): void => {
  loading.value = true;
  getLiveStreamingConfigPage(param, cur.current, cur.pageSize)
    .then((res) => {
      if (res.code == "200") {
        dataSource.value = res.data.records;
        pagination.value.current = res.data.current;
        pagination.value.pageSize = res.data.size;
        pagination.value.total = res.data.total;
      } else {
        message.error((res && res.message) || "查询列表失败！");
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const init = (): void => {
  //获取用户直播配置表页面数据
  getLiveStreamingConfigListPage(searchInfo.value, pagination.value);
}

init();

let visible = ref<boolean>(false);

let modelInfo = ref<ModelInfo>({});

//新增和修改弹窗
const editLiveStreamingConfig = (type: string, id: number, status: boolean): void => {
  addOrEditLiveStreamingConfig('put', { id, liveStreamingFlag: status }).then((res) => {
    if (res.code == '200') {
      message.success((res && res.message) || '保存成功！');
      getLiveStreamingConfigListPage(searchInfo.value, pagination.value);
    } else {
      message.error((res && res.message) || '保存失败！');
    }
  })
    .catch((error: any) => {
      message.error(error?.message || "查询失败！");
    }).finally(() => {
      loading.value = false;
    });
}

const handleOk = (v: boolean): void => {
  visible.value = v;
  getLiveStreamingConfigListPage(searchInfo.value, pagination.value);
};

const handleCancel = (v: boolean): void => {
  visible.value = v;
};
</script>
<style lang="scss" scoped></style>
